<template>
  <div class="user-info-wrap">
    <emailEdit
      ref="emailEdit"
      @refresh="getUserInfo"
      @changeDiv="changeEmailDiv"
      :showEmailDialog="showEmailDialog"
      v-show="showEmailDialog"/>
    <phoneEdit
      ref="phoneEdit"
      @refresh="getUserInfo"
      @changeDiv="changePhoneDiv"
      :showPhoneDialog="showPhoneDialog"
      v-show="showPhoneDialog"/>

    <div class="user-info-edit-warp">
      <el-form ref="form" :model="user" :rules="rules" label-width="100px">
        <el-form-item label="用户名">
          <common-input v-model="user.userName" disabled/>
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <common-input v-model="user.nickName" :type="'text'"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="user.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色">
          <common-input v-model="user.remark" class="overflow-style" :verify="false" :title="user.remark" disabled/>
        </el-form-item>
        <el-form-item label="数据权限">
          <common-input v-model="user.permissionName" class="overflow-style" :verify="false" :title="user.permissionName" disabled/>
        </el-form-item>
        <el-form-item label="所属组织">
          <common-input v-model="user.deptFullNameArr" class="overflow-style" :verify="false" :title="user.deptFullNameArr" disabled/>
        </el-form-item>
        <el-form-item label="手机号码">
          <common-input v-model="user.encodePhone" :verify="false" disabled style="width: calc(100% - 64px);margin-right: 8px"/>
          <el-button type="primary" plain @click="editPhoneFun">修改</el-button>
        </el-form-item>
        <el-form-item label="邮箱">
          <common-input v-model="user.encodeEmail" :verify="false" disabled style="width: calc(100% - 64px);margin-right: 8px"/>
          <el-button type="primary" plain @click="editEmailFun">修改</el-button>
        </el-form-item>

        <el-form-item style="margin-top:48px">
          <el-button type="primary" style="width: 145px;  height: 36px;" @click="submit" :loading="updateLoading">更新信息</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="user-info-avatar-wrap">
      <div class="avatar-title">头像</div>
      <userAvatar :user="user" @refresh="updateAvatar"/>
    </div>

<!--    <phoneEdit ref="phoneEdit" @refresh="getUserInfo"/>-->
<!--    <emailEdit ref="emailEdit" @refresh="getUserInfo"/>-->
  </div>
</template>

<script>
import store from '@/store'
import { updateSelfBaseInfo } from '@/api/person'
import userAvatar from '../profile/userAvatar'
import phoneEdit from '../components/phoneEdit'
import emailEdit from '../components/emailEdit'

export default {
  components: { userAvatar, phoneEdit, emailEdit },
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      // 表单校验
      rules: {
        nickName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ]
      },
      showEmailDialog: false,
      showPhoneDialog: false,
      updateLoading: false,
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.updateLoading = true
          updateSelfBaseInfo({
            userId: this.user.userId,
            nickName: this.user.nickName,
            sex: this.user.sex,
            userPic: store.getters.avatar
          }).then((response) => {
            this.$GlobalSuccessMessage('编辑成功')
          }).finally(() => this.updateLoading = false)
        }
      })
    },
    close() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({ path: '/index' })
    },
    /**
     * 更新头像
     */
    updateAvatar(e) {
      this.user.userPic = e
    },
    /**
     * 编辑手机号
     */
    editPhoneFun() {
      this.showPhoneDialog = true
      this.$refs.phoneEdit.show(this.user)
    },
    /**
     * 编辑邮箱
     */
    editEmailFun() {
      this.showEmailDialog = true
      this.$refs.emailEdit.show(this.user)
    },
    /**
     * 获取个人信息
     */
    getUserInfo() {
      this.$emit('refresh')
    },
    changeEmailDiv() {
      this.showEmailDialog = false
    },
    changePhoneDiv() {
      this.showPhoneDialog = false
    },
  }
}
</script>
<style lang="scss" scoped>
.user-info-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;
  box-sizing: border-box;

  .user-info-edit-warp {
    width: 600px;
    margin-right: 158px;
  }

  .user-info-avatar-wrap {
    display: flex;

    .avatar-title {
      font-size: 14px;
      color: #606266;
      font-weight: 400;
      padding-right: 5px;
    }
  }

  ::v-deep .overflow-style {

    input {
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;

    }
  }
}
</style>
